/* Styles for developer needs */
/* color schema display*/

.colorSchema {
    border: none;
    background-color: var(--base-color);
    text-align: center;
}

.color{
    display: inline-block;
    border: solid 1px var(--primary-color);
    text-align: center;
    width: 200px;
    height: 35px;
}

.base, .primary, .secondary, .accent1, .accent2 {
    padding-top: 7px;
}

.base{
    background-color: var(--color-1);
    border: solid 1px var(--color-3);
    color: var(--font-color-1);
}

.primary{
    background-color: var(--color-2);
    border: solid 1px var(--color-1);
    color: var(--font-color-2);
}

.secondary{
    background-color: var(--color-3);
    border: solid 1px var(--color-2);
    color: var(--font-color-3);
}